// // 前端登录页面

// import React, { useState, useEffect } from 'react'
// import { useNavigate } from 'react-router-dom'
// import { Card } from 'react-vant';
// import { Button, Input, Form } from 'react-vant'
// import axios from 'axios';
// import './App.css'
// //定义api
// interface Login {
//   phone: string,
//   password: string
// }

// //定义数据
// interface LoginResponse {
//   login: Login[],
//   token: string;
// }
// const Login: React.FC = () => {
//   const navigate = useNavigate()
//   // const [form] = Form.useForm()
//   //获取数据
//   const [arr, setarr] = useState<Login[]>([])
//   const [token, setToken] = useState('');
//   const [phone, setPhone] = useState('')//手机号
//   const [password, setPassword] = useState('')//密码
//   let tokenTimer: any;
//   const getall = async () => {
//     let res = await axios.get<LoginResponse>(`http://localhost:3000/deng`)
//     setarr(res.data.login)
//     setToken(res.data.token);
//     localStorage.setItem('token', res.data.token);
//     tokenTimer = setTimeout(() => {
//       navigate('/shou');
//     }, 60 * 1000);
//   }
//   const handleLogin = () => {
//     const user = arr.find(u => u.phone === phone && u.password === password);
//     if (user) {
//       navigate('/shou');
//       const storedToken = localStorage.getItem('token');
//       if (storedToken) {
//         setToken(storedToken);
//         axios.get('http://localhost:3000/deng', {
//           headers: {
//             Authorization: `Bearer ${storedToken}`
//           }
//         })
//           .then(response => {
//             console.log('使用token请求成功:', response.data);
//           })
//           .catch(error => {
//             console.error('使用token请求失败:', error);
//           });
//       }
//     } else {
//       alert('用户名或密码错误');
//     }
//   }
//   const [form] = Form.useForm<{ phone: string; password: string }>();
//   //钩子函数
//   useEffect(() => {
//     getall()
//     return () => {
//       if (tokenTimer) {
//         clearTimeout(tokenTimer);
//       }
//     };
//   }, [])
//   return (
//     <div>
//       <Card round className='a1'>
//         <h2 style={{ textAlign: 'center' }}>Sign Up</h2>
//         <Card.Body>
//           <Form
//             form={form}

//             footer={
//               <div style={{ margin: '16px 16px 0' }}>
//                 <Button round nativeType='submit' type='primary' block onClick={handleLogin}>
//                   提交
//                 </Button>
//               </div>
//             }
//           >
//             <Form.Item
//               rules={[{ required: true, message: '请填写用户手机号' }]}
//               name='phone'
//               label='手机号'
//             >
//               <Input placeholder='请输入用户手机号' value={phone} onChange={(e) => { setPhone(e) }} />
//             </Form.Item>
//             <Form.Item
//               rules={[{ required: true, message: '请填写密码' }]}
//               name='password'
//               label='密码'
//             >
//               <Input placeholder='请输入密码' value={password} onChange={(e) => setPassword(e)} type='password' />
//             </Form.Item>
//           </Form>
//         </Card.Body>
//       </Card>
//     </div>
//   )
// }
// export default Login




// import React, { useState, useEffect } from 'react'
// import { useNavigate } from 'react-router-dom'
// import { Card } from 'react-vant';
// import { Button, Input, Form, Notify } from 'react-vant'
// import axios from 'axios';
// import './App.css'

// // 定义接口
// interface Login {
//   phone: string,
//   password: string,
//   _id?: string // 添加_id字段用于删除用户
// }

// interface LoginResponse {
//   login: Login[],
//   token: string;
// }

// const Login: React.FC = () => {
//   const navigate = useNavigate()
//   const [arr, setarr] = useState<Login[]>([])
//   const [token, setToken] = useState('')
//   const [phone, setPhone] = useState('')
//   const [password, setPassword] = useState('')
//   const [errorCount, setErrorCount] = useState<Record<string, number>>({}) // 记录每个用户的错误次数
//   let tokenTimer: any;

//   // 获取所有用户数据
//   const getall = async () => {
//     try {
//       const res = await axios.get<LoginResponse>(`http://localhost:3000/deng`)
//       setarr(res.data.login)
//       setToken(res.data.token)
//       localStorage.setItem('token', res.data.token)
//       tokenTimer = setTimeout(() => {
//         navigate('/shou')
//       }, 60 * 1000)
//     } catch (error) {
//       Notify.show({ type: 'danger', message: '获取用户数据失败' })
//     }
//   }

//   // 删除用户
//   const deleteUser = async (userId: string) => {
//     try {
//       await axios.delete(`http://localhost:3000/dele?_id=${userId}`)
//       Notify.show({ type: 'danger', message: '由于多次登录失败，您的账号已被删除' })
//       // 重新获取用户列表
//       getall()
//     } catch (error) {
//       Notify.show({ type: 'danger', message: '删除用户失败' })
//     }
//   }



//   // 处理登录
//   const handleLogin = async () => {
//     const user = arr.find(u => u.phone === phone)

//     if (!user) {
//       Notify.show({ type: 'danger', message: '用户不存在' })
//       return
//     }

//     if (user.password === password) {
//       // 登录成功，重置错误计数
//       setErrorCount(prev => ({ ...prev, [user.phone]: 0 }))
//       navigate('/shou')

//       const storedToken = localStorage.getItem('token')
//       if (storedToken) {
//         setToken(storedToken)
//         try {
//           const response = await axios.get('http://localhost:3000/deng', {
//             headers: {
//               Authorization: `Bearer ${storedToken}`
//             }
//           })
//           console.log('使用token请求成功:', response.data)
//         } catch (error) {
//           console.error('使用token请求失败:', error)
//         }
//       }
//     } else {
//       // 密码错误
//       const newErrorCount = (errorCount[user.phone] || 0) + 1
//       setErrorCount(prev => ({ ...prev, [user.phone]: newErrorCount }))

//       if (newErrorCount >= 3) {
//         // 超过3次错误，删除用户
//         if (user._id) {
//           await deleteUser(user._id)
//         }
//       } else {
//         Notify.show({ 
//           type: 'danger', 
//           message: `用户名或密码错误，剩余尝试次数: ${3 - newErrorCount}`
//         })
//       }
//     }
//   }

//   const [form] = Form.useForm<{ phone: string; password: string }>()

//   useEffect(() => {
//     getall()
//     return () => {
//       if (tokenTimer) {
//         clearTimeout(tokenTimer)
//       }
//     }
//   }, [])

//   return (
//     <div>
//       <Card round className='a1'>
//         <h2 style={{ textAlign: 'center' }}>Sign Up</h2>
//         <Card.Body>
//           <Form
//             form={form}
//             footer={
//               <div style={{ margin: '16px 16px 0' }}>
//                 <Button round nativeType='submit' type='primary' block onClick={handleLogin}>
//                   提交
//                 </Button>
//               </div>
//             }
//           >
//             <Form.Item
//               rules={[{ required: true, message: '请填写用户手机号' }]}
//               name='phone'
//               label='手机号'
//             >
//               <Input placeholder='请输入用户手机号' value={phone} onChange={setPhone} />
//             </Form.Item>
//             <Form.Item
//               rules={[{ required: true, message: '请填写密码' }]}
//               name='password'
//               label='密码'
//             >
//               <Input placeholder='请输入密码' value={password} onChange={setPassword} type='password' />
//             </Form.Item>
//           </Form>
//         </Card.Body>
//       </Card>
//     </div>
//   )
// }

// export default Login




import React, { useState, useEffect, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, Button, Input, Form, Notify } from 'react-vant';
import axios from 'axios';
import './App.css';

interface Login {
  phone: string;
  password: string;
  _id?: string;
}

interface LoginResponse {
  login: Login[];
  token: string;
}

const Login: React.FC = () => {
  const navigate = useNavigate();
  const [arr, setArr] = useState<Login[]>([]);
  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [errorCount, setErrorCount] = useState<Record<string, number>>({});
  const [tokenTimer, setTokenTimer] = useState<NodeJS.Timeout | null>(null);

  const getAll = useCallback(async () => {
    try {
      const res = await axios.get<LoginResponse>('http://localhost:3000/deng');
      setArr(res.data.login);
      localStorage.setItem('token', res.data.token);

      const timer = setTimeout(() => {
        navigate('/shou');
      }, 60 * 1000);

      setTokenTimer(timer);
    } catch (err) {
      console.error('获取用户数据失败:', err);
      Notify.show({ type: 'danger', message: '获取用户数据失败' });
    }
  }, [navigate]);

  const deleteUser = useCallback(async (userId: string) => {
    try {
      await axios.delete(`http://localhost:3000/dele?_id=${userId}`);
      Notify.show({ type: 'danger', message: '由于多次登录失败，您的账号已被删除' });
      await getAll();
    } catch (err) {
      console.error('删除用户失败:', err);
      Notify.show({ type: 'danger', message: '删除用户失败' });
    }
  }, [getAll]);

  const handleLogin = useCallback(async () => {
    const user = arr.find(u => u.phone === phone);

    if (!user) {
      Notify.show({ type: 'danger', message: '用户不存在' });
      return;
    }

    if (user.password === password) {
      setErrorCount(prev => ({ ...prev, [user.phone]: 0 }));
      navigate('/shou');

      const storedToken = localStorage.getItem('token');
      if (storedToken) {
        try {
          const response = await axios.get('http://localhost:3000/deng', {
            headers: {
              Authorization: `Bearer ${storedToken}`
            }
          });
          console.log('使用token请求成功:', response.data);
        } catch (err) {
          console.error('使用token请求失败:', err);
        }
      }
    } else {
      const newErrorCount = (errorCount[user.phone] || 0) + 1;
      setErrorCount(prev => ({ ...prev, [user.phone]: newErrorCount }));

      if (newErrorCount >= 3) {
        if (user._id) {
          await deleteUser(user._id);
        }
      } else {
        Notify.show({
          type: 'danger',
          message: `用户名或密码错误，剩余尝试次数: ${3 - newErrorCount}`
        });
      }
    }
  }, [arr, phone, password, errorCount, navigate, deleteUser]);

  const [form] = Form.useForm<{ phone: string; password: string }>();

  useEffect(() => {
    getAll();
    return () => {
      if (tokenTimer) {
        clearTimeout(tokenTimer);
      }
    };
  }, [getAll, tokenTimer]);

  return (
    <div>
      <Card round className='a1'>
        <h2 style={{ textAlign: 'center' }}>Sign Up</h2>
        <Card.Body>
          <Form
            form={form}
            footer={
              <div style={{ margin: '16px 16px 0' }}>
                <Button
                  round
                  nativeType='submit'
                  type='primary'
                  block
                  onClick={handleLogin}
                >
                  登录
                </Button>
              </div>
            }
          >
            <Form.Item
              rules={[{ required: true, message: '请填写用户手机号' }]}
              name='phone'
              label='手机号'
            >
              <Input
                placeholder='请输入用户手机号'
                value={phone}
                onChange={setPhone}
              />
            </Form.Item>
            <Form.Item
              rules={[{ required: true, message: '请填写密码' }]}
              name='password'
              label='密码'
            >
              <Input
                placeholder='请输入密码'
                value={password}
                onChange={setPassword}
                type='password'
              />
            </Form.Item>
          </Form>
          <h3 onClick={() => navigate('/register')}>立即注册</h3>
        </Card.Body>
      </Card>
    </div>
  );
};

export default Login;